<template>
	<view class="container">
		<!-- 整个佣金表区域 -->
		<block v-if="serverKickbackList!=null&&serverKickbackList.length!=0">
			<!-- 标题选择 -->


			<!-- 收益明细 -->
			<view class="incomeDetail">
				<view class="incomeDetailList" v-for="(group, index) in groupedDataArray" :key="index">

					<view class="dateDeterminedCard">
						<view class="dateTitle">
							{{ group.yearMonth }}
						</view>

						<view class="detailItem" v-for="(record, index) in group.records" :key="index">
							<view class="eventInfo">
								<view class="event">
									{{getCommssionStatusText(record.serverKickbackChangeReasonStatus)}}
								</view>
								<!-- 这里需要根据状态来判断是增加还是减少 -->
								<view class="amount">

									<view
										:class="record.serverKickbackChangeReasonStatus===2 || record.serverKickbackChangeReasonStatus===3?'minus':'plus'">
										<text class="statusText"
											v-if="record.serverKickbackChangeReasonStatus===2|| record.serverKickbackChangeReasonStatus===3">
											-
										</text>
										<text class="statusText" v-else>
											+
										</text>
										￥{{record.serverKickbackChangeAmount}}
									</view>

								</view>
							</view>

							<view class="timeInfo">
								<view class="time">
									{{record.serverKickbackChangeTime}}
								</view>

								<view class="balance">
									佣金余额{{record.serverKickbackRemainAmount}}
								</view>
							</view>
						</view>


					</view>

				</view>
			</view>


		</block>

		<view class="empty" v-else>
			暂无任何收益
		</view>
	</view>
</template>

<script>
	import * as commssionApi from '@/api/commssion/commssion.js'
	export default {
		data() {
			return {
				//服务商剩余的佣金金额
				serverKickbackRemainAmount: 0,
				//佣金表
				serverKickbackList: [],
				groupedData: []
			};
		},
		computed: {
			groupedDataArray() {
				return Object.keys(this.groupedData).map(key => {
					return {
						yearMonth: key,
						records: this.groupedData[key]
					};
				});
			}
		},
		onLoad() {
			this.getServiceInfo();
		},
		methods: {
			//对佣金按月份分组
			groupByYearMonth(data) {
				const grouped = {};
				data.forEach(record => {
					const yearMonth = record.serverKickbackChangeTime.split(' ')[0].slice(0, 7).replace('-', '年') +
						'月';
					if (!grouped[yearMonth]) {
						grouped[yearMonth] = [];
					}
					grouped[yearMonth].push(record);
				});
				return grouped;
			},
			//获取服务商佣金明细
			async getServiceInfo() {
				const res = await commssionApi.getServerKickbackByServerUserId();
				console.log(res)
				console.log("佣金信息")
				if (res.data.code === 200) {
					console.log('内部触发')
					const serviceInfo = res.data.data;
					this.serverKickbackRemainAmount = serviceInfo.serverKickbackRemainAmount;
					this.serverKickbackList = serviceInfo.serverKickbackList;
					this.groupedData = this.groupByYearMonth(this.serverKickbackList);

				}


			},
			getCommssionStatusText(status) {
				switch (status) {
					case 1:
						return '服务商佣金发放';
					case 2:
						return '云仓发货使用佣金抵扣运费';
					case 3:
						return '提现';
					default:
						return '未知状态';
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 54rpx;



		//空背景
		.empty {
			position: absolute;
			left: 256rpx;
			bottom: 812rpx;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(116, 116, 116, 1);
		}

		// 佣金明细
		.incomeDetail {
			
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			width: 694rpx;
			height: 1250rpx;
			opacity: 1;
			border-radius: 30rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 243, 245, 0) 100%);
			overflow: auto;
			padding-bottom: 100rpx;


			.incomeDetailList {
				padding-bottom: 50rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;



				.dateDeterminedCard {
					
					width: calc(100% - 56rpx);

					display: flex;
					flex-direction: column;
					align-items: center;


					.dateTitle {
						
						box-sizing: border-box;
						width: 694rpx;
						height: 82rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						background: rgba(223, 161, 60, 1);
						border-radius: 30rpx 30rpx  0rpx 0rpx;
						
					}

					.detailItem {
						border-bottom: 0.7rpx solid rgba(119, 119, 119, 1);
						width: 100%;


						.eventInfo {
							display: flex;
							justify-content: space-between;
							margin-top: 24rpx;

							.event {
								font-size: 32rpx;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
							}

							.amount {
								.plus {
									font-size: 32rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 46.34rpx;
									color: rgba(212, 48, 48, 1);
								}

								.minus {
									ont-size: 32rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 46.34rpx;
									color: rgba(15, 153, 70, 1);
								}
							}

						}

						.timeInfo {
							margin-top: 6rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 6px;

							.time {
								font-size: 26rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 37.64rpx;
								color: rgba(85, 85, 87, 1);
							}

							.balance {
								font-size: 26rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 37.64rpx;
								color: rgba(85, 85, 87, 1);
							}
						}
					}
				}
			}
		}
	}
</style>